<template>
  <div class="confirm-box">
    <div class="title">
      <p>{{ title }}</p>
    </div>
    <div class="submit">
      <button class="confirm" type="button" @click="confirm">确认</button>
      <button class="cancel" type="button" @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['infoTitle'],
  data () {
    return {
      title: this.infoTitle,
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    cancel () { // 取消
     this.$emit('cancel')
    },
    confirm () { // 退出登录
      this.$emit('confirm')
    },
  }
}
</script>
<style lang="scss" scoped>
.confirm-box {
  height: 210px;
  padding: 20px 0;
  .title {
    height: 50px;
    p {
      line-height: 50px;
      text-align: center;
      font-size: 21px;
      color: #333;
    }
  }
  .submit {
    margin-top: 60px;
    text-align: center;
    button {
      height: 45px;
      width: 150px;
      margin: 0 20px;
      border: 1px solid $base-color;
      border-radius: 22.5px;
      font-size: 16px;
      &:hover {
        box-shadow: 0 0 6px 0 $base-color;
      }
    }
    .cancel {
      background: #fff;
      color: $base-color;
    }
    .confirm {
      background: $base-color;
      color: #fff;
    }
  }
}
</style>
